<template>
  <view class="strategy-container">
    <view class="header-container">
      <view class="left" @tap="toBack"><text class="iconfont icon-back"></text></view>
      <view class="center">{{ title | common_ellipsis(4) }}</view>
      <view class="right">
      </view>
    </view>
    <view class="main-container">
      <view class="content-container">
        <view class="title">{{ title }}</view>
        <view class="time" style="margin-bottom: 30px;">
          <img :src="avatarUrl" alt="" style="width: 24px; height: 24px;border-radius: 50%;">
          <text>{{ name }}</text>
          <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/active_detail_slices/time@3x.png'" alt="">
          <text style="flex-grow: 0;">{{ createdAt }}</text>
        </view>
        <view class="content">
          <img class="strategy-image" v-show="!noImage" :src="imageUrl" alt="" @error="noImage = true" @load="noImage = false">
          <view v-show="noImage" class="image-empty">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/image_empty.png'" alt="">
          </view>
          <view class="info-container">
            <text>{{ info }}</text>
          </view>
          <view class="details-container">
            <text>{{ details }}</text>
          </view>
        </view>
      </view>
      <view class="comment-list-container">
        <view class="comment-list-wrapper">
          <view class="comment-lable">评论（{{ commentList.length }}）</view>
          <view class="comment-list">
            <view v-for="item in commentList" class="comment-item" :key="item.id">
              <view class="user-time-wrapper">
                <view class="user-wrapper">
                  <view class="avatar-wrapper">
                    <basic-image class="avatar-image" :src="item.avatarUrl" :error-src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/no_avatar.png'" :costomer-style="{
                      width: '24px',
                      height: '24px',
                      borderRadius: '50%'
                    }" />
                  </view>
                  <view class="name-wrapper">
                    <text>{{ item.name }}</text>
                  </view>
                </view>
                <view class="time-wrapper">
                  <text>{{ item.createdAt }}</text>
                </view>
              </view>
              <view class="content-wrapper">
                <text>{{ item.content }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="previous-btn">上一章</view>
      <view class="next-btn">下一章</view> -->
    </view>
    <view class="footer-container">
      <view class="comment-input-wrapper">
        <input v-model="commentContent" type="text" name="" id="">
      </view>
      <view class="comment-btn-wrapper" @tap="comment">
        <view class="svg">
          <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/comment.png'" alt="">
        </view>
      </view>
      <view class="praise-wrapper" @tap="() => { !isPraise ? praise() : unPraise(); }">
        <view class="svg" :style="isPraise ? 'background-color: #f4ea2a;' : 'background-color: #efefef;'">
          <img v-if="!isPraise" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/praise.png'" alt="">
          <img v-else :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/praise_active_1.png'" alt="">
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue';
import PraiseSvg from '@/svgs/praise.vue';
import CommentSvg from '@/svgs/comment.vue';
import BasicImage from '@/components/basic-image/basic-image.vue';
export default Vue.extend({
  components: {
    PraiseSvg,
    CommentSvg,
    BasicImage
  },
  onLoad(options: any) {
    this.id = options.id
  },
  data() {
    return {
      id: "",
      createdAt: "",
      customerId: null,
      details: null,
      imageUrl: "",
      info: "",
      isExamine: 1,
      isPraise: 0,
      name: null,
      praiseNum: 0,
      sort: null,
      title: "",
      updatedAt: "",
      avatarUrl: "",

      noImage: false,

      commentList: [],

      commentContent: ""
    }
  },
  mounted() {
    this.getStrategyInfo();
    this.getCommentList();
  },
  methods: {
    getStrategyInfo() {
      this.$mainApi.apiGetStrategyDetail(this.id).then((res: any) => {
        if (!res.data.imageUrl) this.noImage = true;
        this.createdAt = res.data.createdAt;
        this.customerId = res.data.customerId;
        this.details = res.data.details;
        this.imageUrl = res.data.imageUrl;
        this.info = res.data.info;
        this.isExamine = res.data.isExamine;
        this.isPraise = res.data.isPraise;
        this.name = res.data.name;
        this.praiseNum = res.data.praiseNum;
        this.sort = res.data.sort;
        this.title = res.data.title;
        this.updatedAt = res.data.updatedAt;
        this.avatarUrl = res.data.avatarUrl;
      });
    },
    toBack() {
      uni.navigateBack({ delta: 1 })
    },
    praise() {
      this.$mainApi.apiStrategyPraise(parseInt(this.id)).then(() => {
        this.isPraise = 1;
      });
    },
    unPraise() {
      this.$mainApi.apiStrategyUnpraise(parseInt(this.id)).then(() => {
        this.isPraise = 0;
      });
    },
    getCommentList() {
      this.$mainApi.apiGetFeedbackCommentsByPage(0, 9999, this.$config.FEEDBACK_CATEGORY.comment, this.id).then((res: any) => {
        this.commentList = res.data.records;
      });
    },
    comment() {
      this.$mainApi.apiCommentStrategy({
        category: this.$config.FEEDBACK_CATEGORY.comment,
        content: this.commentContent,
        strategieId: parseInt(this.id)
      }).then(() => {
        this.commentContent = "";
        this.getCommentList();
      });
    }
  }
})
</script>

<style lang="scss" scoped>
.strategy-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-container {
  color: #333333;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right {
  flex-direction: row-reverse;
}

.header-container .right img {
  width: 16px;
  height: 16px;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  width: 100%;
  overflow: auto;
  position: relative;
}

.content-container {
  margin-bottom: 30px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.content-container .title {
  color: #333333;
  font-size: 18px;
}

.content-container img {
  width: 100%;
}

.content-container .time {
  color: #333333;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-container .time img {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  flex-shrink: 0;
}

.content-container .time text {
  color: #666666;
  font-size: 13px;
  flex-grow: 1;
}

.content-container .image-empty {
  margin: 15px 0px;
  padding: 15px 35vw;
  border: 2px dashed #bfbfbf;
  border-radius: 15px;

  img {
    width: 100%;
  }
}

.content-container .strategy-image {
  border-radius: 15px;
  margin-bottom: 15px;
}

.content-container .info-container {
  color: #666666;
  background-color: #efefef;
  border-radius: 15px;
  margin-bottom: 15px;
  padding: 15px;
}

.content-container .details-container {
  color: #555555;
  padding: 0px 15px;
}

.content-container .content {
  font-size: 13px;
}

.previous-btn {
  color: #FFFFFF;
  padding: 15px 30px;
  background-color: #006b65;
  border-radius: 28px;
  position: fixed;
  left: 15px;
  bottom: 30px;
}

.next-btn {
  color: #FFFFFF;
  padding: 15px 30px;
  background-color: #006b65;
  border-radius: 28px;
  position: fixed;
  right: 15px;
  bottom: 30px;
}

.comment-list-container {
  padding: 0px 15px;

  .comment-list-wrapper {
    display: flex;
    flex-direction: column;

    .comment-lable {
      color: #333333;
      font-size: 16px;
      margin-bottom: 15px;
    }

    .comment-list {
      display: flex;
      flex-direction: column;

      .comment-item {
        margin-bottom: 15px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        background-color: #efefef;
        border-radius: 15px;

        .user-time-wrapper {
          margin-bottom: 15px;
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;

          .user-wrapper {
            display: flex;

            .avatar-wrapper {
              margin-right: 5px;
              display: flex;
              align-items: center;
              justify-content: center;

              .avatar-image {
                width: 24px;
                height: 24px;
                border-radius: 50%;
              }
            }

            .name-wrapper {
              color: #666666;
              font-size: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .time-wrapper {
            color: #666666;
            font-size: 14px;
          }
        }
        .content-wrapper {
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }
}

.footer-container {
  height: 46px;
  flex-shrink: 0;
  padding: 5px 15px;
  background: #FFFFFF;
  box-shadow: 0px 12px 26px 3px rgba(0, 0, 0, 0.34);
  display: flex;

  .comment-input-wrapper {
    flex-grow: 1;
    margin-right: 5px;
    display: flex;
    align-items: center;

    input {
      flex-grow: 1;
      border-radius: 8px;
      padding: 5px;
      background-color: #efefef;
    }
  }

  .comment-btn-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    .svg {
      width: 40px;
      height: 40px;
      margin-right: 5px;
      // padding: 7px;
      border-radius: 50%;
      background-color: #efefef;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .praise-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    .svg {
      width: 40px;
      height: 40px;
      // padding: 7px;
      border-radius: 50%;
      background-color: #efefef;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>